<template>
  <div class="grid-layout" :style="mergeStyle">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name:'GridLayout',
  props:{
    row:{
      type:Number,
      default:3,
    },
    col:{
      type:Number,
      default:3,
    },
    itemWidth:{
      type:String,
      default:'1fr',
    },
    itemHeight:{
      type:String,
      default:'1fr',
    },
    rowGap:{
      type:String,
      default:'0px',
    },
    colGap:{
      type:String,
      default:'0px',
    },
    placeItems:{
      type:String,
      default:undefined,//<align-items> <justify-items>
    },
    placeContent:{
      type:String,
      default:undefined,//<align-content> <justify-content>
    }
  },
  data(){
    return {
      mergeStyle:{
        gridTemplateRows:`repeat(${this.row},${this.itemHeight})`,
        gridTemplateColumns:`repeat(${this.col},${this.itemWidth})`,
        gridRowGap:`${this.rowGap}`,
        gridColumnGap: `${this.colGap}`,
        gridAutoRows: `${this.itemHeight}`,
        gridAutoColumns: `${this.itemWidth}`,
        placeItems:placeItems,
        placeContent:placeContent
      }
    }
  }
  
}
</script>
<style scoped>
.grid-layout{
  display: grid;
  grid-auto-flow: row dense;
  justify-content: stretch;
  align-content: stretch;
  justify-items: stretch;
  align-items: stretch;
}
</style>